<template>
	<view style="margin-top: var(--status-bar-height);">
		<view class="top-bar">
			<view class="top-bar-left">
				<slot name="left" class="test">
					<image></image>
				</slot>
			</view>
			<view class="top-bar-center">
				<slot name="center">
					<image src="../../static/images/index/logo.png" mode="" class="logo"></image>
				</slot>
			</view>
			<view class="top-bar-right">
				<slot name="right">
					<view class="add" style="clear: both;">
						<image src="../../static/images/index/add.png" @tap="testload"></image>
					</view>
				</slot>
			</view>
		</view>
		<!-- <view class="network" v-if="isLine">
			网络未连接
		</view> -->
	</view>
</template>

<script>
	export default {
		name: "top-bar",
		data() {
			return {
				isLine: true
			};
		},
		onLoad() {
			console.log("nihoa");
		},
		methods: {
			// 挑转搜索页面
			search() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			toDetail() {
				// console.log('garllery',id);
				uni.navigateTo({
					url: `/pages/detail/detail?id=${this.userid}`,

				})
			},
			getNetWork() {
				uni.getNetworkType({
					success: function(res) {
						console.log(res.networkType);
					}
				});

			},
			// 更多功能页面
			testload() {
				uni.navigateTo({
					url: "/pages/testload/testload"
				})
			},
		}
	}
</script>

<style lang='scss'>
	.top-bar {
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx;
		height: 88rpx;
		/* overflow: hidden; */
		/* 安全距离 */
		/* padding-top: var(--status-bar-height); */
		background: $uni-bg-color;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		z-index: 99;

		.top-bar-left {
			width: 68rpx;
			height: 68rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}

		.top-bar-center {
			image {
				width: 88rpx;
				height: 42rpx;
			}
		}

		.top-bar-right {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 58rpx;
				height: 58rpx;
			}
		}


	}

	.network {
		height: 40rpx;
		line-height: 40rpx;
		border: 1px solid red;
		text-align: center;
		background-color: #ff7a7a;
		transition: all 0.3s;
	}
</style>